<template>
  <div class="index-main">
    <basic-panel class="panel" :noPadding="true">
      <template v-slot:header>
        <!--tag-->
        <topics-nav @getTopicByTag="switchPage" ref='nav'/>
      </template>

      <template class="inner">
        <!--主体-->
        <topics-list :topics="topics"/>
        <!--分页器-->
        <pagination :totalTopics="totalTopics" @switchPage="switchPage" @go="go" ref="page"/>
      </template>
    </basic-panel>
  </div>
</template>

<script>
import BasicPanel from '@components/common/panel/BasicPanel.vue'
import TopicsList from '@components/common/TopicsList.vue'
import TopicsNav from './childComp/CatesNav.vue'
import Pagination from '@components/common/Pagination.vue'

export default {
  name: 'profile-main',
  components:{
    BasicPanel,
    TopicsList,
    TopicsNav,
    Pagination
  },
  data() {
    return {
      topics: [],
      totalTopics: 0,
    }
  },
  methods: {
    // 点击数字或tag
    switchPage(option) {
      if(option === 'cate') {
        this.$refs.page.currentPage = 1
      }
      var page = this.$refs.page.currentPage
      var tag = this.$refs.nav.currentTag
      this.$axios.getData.getMyTopics(page, tag).then(res => {
        this.topics = res.data.data.thread === null ? [] : res.data.data.thread
        this.totalTopics = res.data.total
      })
    },
    // 切换前后的页数
    go(n) {
      this.$axios.getData.getMyTopics(n, this.$refs.nav.currentTag).then(res => {
        this.topics = res.data.data.thread === null ? [] : res.data.data.thread
        this.totalTopics = res.data.total
      })
    },
  },
  // 获取topic列表
  created() {
    this.$axios.getData.getMyTopics(1, 'thread').then(res => {
      this.topics = res.data.data.thread === null ? [] : res.data.data.thread
      this.totalTopics = res.data.total
    })
  },
}
</script>

<style scoped>
</style>
